<template>
  <tr>
    <!-- <td>{{ staff.user_id }}</td> -->
    <td>{{ staff.user_account }}</td>
    <td>{{ staff.user_name }}</td>
    <td>{{ formatGender(staff.user_sex_id) }}</td>
    <td>{{ staff.position }}</td>
    <td>{{ formatDate(staff.user_entrytime) }}</td>
    <td>{{ staff.salary ? `¥${staff.salary}` : '未设置' }}</td>
    <td>
      <button @click="handleView" class="view-btn">查看</button>
      <button @click="handleEdit" class="edit-btn">编辑</button>
      <button @click="handleDelete" class="delete-btn">删除</button>
    </td>
  </tr>
</template>

<script>
export default {
  name: 'StaffItem',
  props: {
    staff: {
      type: Object,
      required: true
    }
  },
  methods: {
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      if (!isNaN(date.getTime())) {
        // 调整时区，确保日期正确，并加一天
        date.setDate(date.getDate() + 1);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      }
      return dateString;
    },
    formatGender(genderId) {
      return genderId === 1 ? '男' : '女';
    },
    handleEdit() {
      this.$emit('edit', this.staff);
    },
    handleDelete() {
      if (confirm(`确定要删除员工 ${this.staff.user_name} 吗？`)) {
        this.$emit('delete', this.staff.user_id);
      }
    },
    handleView() {
      this.$emit('view', this.staff);
    }
  }
};
</script>

<style scoped>
.edit-btn {
  background-color: #2196F3;
  color: white;
  padding: 5px 10px;
  margin-right: 5px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.delete-btn {
  background-color: #f44336;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.edit-btn:hover {
  background-color: #0b7dda;
}

.delete-btn:hover {
  background-color: #da190b;
}
.view-btn:hover {
  background-color: #0056b3;
}
.view-btn {
  background-color: rgb(184, 184, 79);
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 5px;
}
</style>